import { Icon } from "@/components/icon.tsx";
import logo from "@/assets/Imlogo.png";
import avatar from "@/assets/images/avatar.jpg";
import { Avatar, Breadcrumb } from "antd";
import { Link, useLocation, useNavigate } from "react-router-dom";

interface SlideItem {
	iconName: string;
	title: string;
	url: string;
}

//布局组件
export function Layout(props?: any) {
	let { children } = props;
	const slideItemList: SlideItem[] = [
		{ iconName: "icon-a-021_shouye", title: "首页", url: "/home" },
		{ iconName: "icon-a-021_shuju", title: "数据", url: "/home/data" },
		{
			iconName: "icon-a-021_tuanduihehuoren",
			title: "用户",
			url: "/home/user",
		},
		{ iconName: "icon-a-021_lianxiren", title: "群组", url: "/home/chatroom" },
		{ iconName: "icon-a-021_shezhi", title: "设置", url: "/home/settings" },
	];
	return (
		<div className="flex wh-full">
			<div className="w240 flex-shrink-0 bg-#fff box-shadow">
				<div className="position-relative mt10 mb10 mla mra w200 flex h60 flex-justify-center flex-items-center">
					<img src={logo} alt={"Im在线通信平台"} className="w50 h40 position-absolute left-0" />
					后台管理系统
				</div>
				<div className="w-full h80% flex flex-col">
					{slideItemList.map((item, index) => (
						<Item
							iconName={item.iconName}
							className="w25 h25"
							key={index}
							title={item.title}
							url={item.url}
						/>
					))}
				</div>
			</div>
			<div className="w-full h-full">
				<Top />
				<div className="h-[calc(100%-70px)] w-full overflow-hidden">{children}</div>
			</div>
		</div>
	);
}

//侧边栏子组件
const Item = (props: any) => {
	let { iconName, className, title, url } = props;
	const navigate = useNavigate();
	return (
		<div
			className="flex box-border w200 h50 mlr-a pl15 pr15 flex-items-center b-rd-8 cursor-pointer hover:bg-[rgba(0,84,254)] hover:color-#fff"
			onClick={() => {
				navigate(url);
			}}
		>
			<Icon iconName={iconName} className={className} />
			<div className="font-size-14 ml-5">{title}</div>
			<Icon
				iconName={"icon-xialajiantouxiao"}
				className="h12 w12 fill-#74798c transform-rotate--90 mr10 ml-a"
			/>
		</div>
	);
};

//顶部组件
const Top = () => {
	//面包屑映射
	const breadcrumbNameMap: Record<string, any> = {
		"/home/user": "用户",
		"/home": "首页",
		"/home/settings": "设置",
		"/home/chatroom": "群组",
		"/home/data": "数据",
	};
	const location = useLocation();

	const pathSnippets = location.pathname.split("/").filter(i => i);
	const extraBreadcrumbItems = pathSnippets.map((_, index) => {
		const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
		return {
			key: url,
			title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
		};
	});
	//面包屑
	const breadcrumbItems = [
		{
			title: <span>导航</span>,
			key: "home",
		},
	].concat(extraBreadcrumbItems);
	const native = useNavigate();
	return (
		<div className="w-full h70 bg-#fff flex flex-items-center">
			<Breadcrumb style={{ marginLeft: "20px" }} items={breadcrumbItems} />
			<Avatar style={{ marginLeft: "auto" }} src={avatar} size={40} />
			<div className="mr50 ml10">宵宫</div>
			<div
				onClick={() => {
					native("/");
				}}
			>
				<Icon
					iconName="icon-tuichu"
					className="w25 mr50 cursor-pointer hover:transform-scale-110"
				/>
			</div>
		</div>
	);
};
